<template>
  <div>
    <MyInput v-model='data' placholder='地址'>
      <template #prepend>
        <el-select v-model='value' placeholder='请选择' style='width:100px'>
          <el-option label='aaa' value='1' />
          <el-option label='bbb' value='2' />
          <el-option label='ccc' value='3' />
        </el-select>
      </template>

      <template #append>
        <el-button type='primary' icon='el-icon-search' placeholder='请输入内容'></el-button>
      </template>
    </MyInput>

    <el-table border isIndex :tableColumn='tableColumn' :tableData='tableData' style='margin-top:30px'>
      <template #count='{row}'>
        <div class='annotations'>
          <tr class='annotation-rs cluster-rs' v-for='(item,index) in row.replicas' :key='index'>
            <td>{{ item.key }}: {{ item.value }}</td>
          </tr>
        </div>
      </template>
    </el-table>

  </div>
</template>

<script>
import MyInput from './myInput.vue'
import { ref } from 'vue'

export default {
  name: 'Demo',
  components: {
    MyInput
  },
  data() {
    return {
      data: undefined,
      value: '',
      tableColumn: [
        {
          label: '名称',
          prop: 'name',
          align: 'center'
        },
        {
          label: '命名空间',
          prop: 'space',
          align: 'center'
        },
        {
          label: '实例数',
          prop: 'replicas',
          align: 'center',
          slot: 'count'
        },
        {
          label: '集群tag',
          prop: 'annotations',
          slot: 'tag',
          align: 'center'
        },
        {
          label: '集群资源',
          prop: 'clusterRs',
          slot: 'rs',
          align: 'center'
        }
      ],
      tableData: [{
        name: 'name',
        space: '空间一号',
        replicas: 100,
        annotations: 'flag',
        clusterRs: 'python'
      }]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.tableData = [{}]
    }
  }
}
</script>

<style lang='scss' scoped>
.cluster-rs {
  text-align: center;
}

.annotation-rs {
  width: 100%;
  height: 100%;
  border: none;

  td {
    width: 155px;
    padding: 5px;
    border-right: none;
    text-align: center;
    vertical-align: middle;
  }
}

tr:last-child {
  td {
    border-bottom: none;
  }
}
</style>